<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>read</title>
    <style>
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div id = "imgDiv">

    </div>
    <img id = "next1" style="height:500px;"/>
    <img id = "next2" style="height:500px;"/>
    <img id = "next3" style="height:500px;"/>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        const socket = new WebSocket('ws://localhost:8080/ws');

        socket.onopen = function(event) {
            console.log('Connected to WebSocket server');
            socket.send('Hello, Server!');
        };

        socket.onmessage = function(event) {
            console.log('Received:', event.data);
            var img = document.createElement('img');
            img.src = event.data;
            $("#imgDiv").append(img);
            // document.getElementById('imgDiv').appendChild(img);
        };

        socket.onclose = function(event) {
            console.log('WebSocket connection closed', event);
        };

        let isLocked = false;
        function imgClickTouchStart(e) {
            if (isLocked) return; // 如果锁已被设置，则直接返回，不执行后续操作
            console.log('没有内容了')
            isLocked = true; // 设置锁
            //没内容了，请求新内容
            // 模拟异步请求，这里使用setTimeout代表一个异步操作
            setTimeout(() => {
                // 模拟请求处理逻辑
                socket.send("{'name':'getNewData'}");
                // 请求结束后，释放锁
                isLocked = false;
            }, 0); // 实际应用中这里应该是真实的异步操作，如fetc
        }

        $("#next1").on("click touchstart",imgClickTouchStart);
        $("#next2").on("click touchstart",imgClickTouchStart);
        $("#next3").on("click touchstart",imgClickTouchStart);
    </script>
</body>
</html>